<template>
	<div class="screen-bg">
		<HeaderTitle />
		<div class="main-area">
			<div class="left-area">
				<LeftTop />
				<LeftBottom />
			</div>
			<div class="center-area">
				<CenterTop />
				<CenterBottom />
			</div>
			<div class="right-area">
				<RightTop />
				<RightBottom />
			</div>
		</div>
	</div>
</template>

<script>
import HeaderTitle from '../components/HeaderTitle.vue';
import LeftTop from '../components/LeftTop.vue';
import LeftBottom from '../components/LeftBottom.vue';
import RightTop from '../components/RightTop.vue';
import RightBottom from '../components/RightBottom.vue';
import CenterTop from '../components/CenterTop.vue';
import CenterBottom from '../components/CenterBottom.vue';
export default {
	components: {
		HeaderTitle,
		LeftTop,
		LeftBottom,
		RightTop,
		RightBottom,
		CenterTop,
		CenterBottom,
	},
	data() {
		return {};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss">
html,
body,
#app {
	height: 100%;
}

.screen-bg {
	background: url('../assets/board.png') no-repeat;
	background-size: 100% 100%;
	height: 100%;
}

.main-area {
	display: grid;
	grid-template-columns: 28.589% 37.02% 32.872%;
	margin-left: 0.833333vw;
	margin-right: 0.833333vw;
	height: 91.59vh;
	column-gap: 0.833333vw;

	.left-area {
		display: grid;
		grid-template-rows: 40% 57.9%;
		grid-row-gap: 2.1%;
	}
}
</style>
